<template>
  <view class="theme-container" :style="{'--primary-color': primaryColor}">
    <view class="theme-header">
      <text class="header-title">主题设置</text>
      <text class="header-desc">选择您喜欢的主题色</text>
    </view>
    
    <view class="theme-list">
      <view 
        class="theme-item" 
        :class="{active: themeColor === item.value}"
        v-for="item in themeOptions" 
        :key="item.value"
        @click="handleThemeChange(item.value)"
      >
        <view class="theme-color" :style="{backgroundColor: item.color}"></view>
        <view class="theme-info">
          <text class="theme-name">{{ item.name }}</text>
          <text class="theme-desc">{{ item.desc }}</text>
        </view>
        <view class="theme-check" v-if="themeColor === item.value">
          <view class="iconfont icon-check"></view>
        </view>
      </view>
    </view>
    
    <view class="preview-section">
      <text class="preview-title">预览效果</text>
      <view class="preview-card">
        <view class="preview-header">
          <text class="preview-header-text">示例页面</text>
        </view>
        <view class="preview-content">
          <view class="preview-button primary-btn">
            <text class="btn-text">主要按钮</text>
          </view>
          <view class="preview-button secondary-btn">
            <text class="btn-text">次要按钮</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getThemeColorFromGlobal, setThemeColorToGlobal, getThemePrimaryColor } from '@/utils/theme.js'
  
  export default {
    data() {
      return {
        themeColor: '1',
        themeOptions: [
          {
            value: '0',
            name: '经典蓝',
            desc: '沉稳专业的蓝色主题',
            color: '#409EFF'
          },
          {
            value: '1',
            name: '自然绿',
            desc: '清新自然的绿色主题',
            color: '#1B5E20'
          },
          {
            value: '2',
            name: '活力橙',
            desc: '充满活力的橙色主题',
            color: '#FA8C16'
          },
          {
            value: '3',
            name: '经典黑',
            desc: '简约经典的黑色主题',
            color: '#262626'
          },
          {
            value: '4',
            name: '优雅紫',
            desc: '高贵优雅的紫色主题',
            color: '#722ED1'
          }
        ]
      }
    },
    computed: {
      primaryColor() {
        return getThemePrimaryColor(this.themeColor)
      }
    },
    async onLoad() {
      await this.initThemeColor()
    },
    methods: {
      async initThemeColor() {
        this.themeColor = await getThemeColorFromGlobal()
      },
      handleThemeChange(value) {
        this.themeColor = value
        setThemeColorToGlobal(value)
        this.$modal.showToast('主题已切换')
        
        // 通知其他页面更新主题色
        uni.$emit('themeChanged', value)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .theme-container {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding: 30rpx;
  }
  
  .theme-header {
    text-align: center;
    margin-bottom: 60rpx;
    
    .header-title {
      display: block;
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .header-desc {
      display: block;
      font-size: 28rpx;
      color: #666;
    }
  }
  
  .theme-list {
    margin-bottom: 60rpx;
  }
  
  .theme-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2rpx solid transparent;
    
    &.active {
      border-color: var(--primary-color);
      box-shadow: 0 4rpx 20rpx color-mix(in srgb, var(--primary-color) 20%, transparent 80%);
    }
    
    .theme-color {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      margin-right: 30rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
    }
    
    .theme-info {
      flex: 1;
      
      .theme-name {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .theme-desc {
        display: block;
        font-size: 26rpx;
        color: #666;
      }
    }
    
    .theme-check {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background: var(--primary-color);
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        color: #fff;
        font-size: 24rpx;
      }
    }
  }
  
  .preview-section {
    .preview-title {
      display: block;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 30rpx;
    }
    
    .preview-card {
      background: #fff;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
      
      .preview-header {
        background: var(--primary-color);
        padding: 30rpx;
        
        .preview-header-text {
          color: #fff;
          font-size: 32rpx;
          font-weight: 600;
        }
      }
      
      .preview-content {
        padding: 40rpx 30rpx;
        display: flex;
        gap: 20rpx;
        
        .preview-button {
          flex: 1;
          height: 80rpx;
          border-radius: 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          
          .btn-text {
            font-size: 28rpx;
            font-weight: 500;
          }
          
          &.primary-btn {
            background: var(--primary-color);
            
            .btn-text {
              color: #fff;
            }
          }
          
          &.secondary-btn {
            background: color-mix(in srgb, var(--primary-color) 10%, transparent 90%);
            border: 1rpx solid var(--primary-color);
            
            .btn-text {
              color: var(--primary-color);
            }
          }
        }
      }
    }
  }
</style>